<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>流程发布页面</title>
<link href="${pageContext.request.contextPath}/resource/css/def/datatables/css/jquery.dataTables.min.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/resource/css/def/frm/workflow/common.css" rel="stylesheet">
<script src="${pageContext.request.contextPath}/resource/js/jquery/plugin/datatables/js/jquery.dataTables.js"></script>
<script type="text/javascript">
	//jquery datatable 对象
	var searchTable;

	$(function(){
		// datatables 
		searchTable = $("#searchTable").DataTable({
			"ordering": false,// 排序
			"serverSide": true,// 开启服务器模式
			"scrollX": true,// 横向滚动
			ajax: {
	            "type": "POST",
	            "url":'search4Page',//请求路径
	            "contentType": 'application/x-www-form-urlencoded; charset=UTF-8',
	            "dataType":'json',
	            "data":function(d){// 查询参数
	            	d.name = $('#name').val();
	            	d.key = $('#key').val();
	            	d.resourceName = $('#resourceName').val();
	            	return d;
	            }
			},            
			columns: [// 对应列
			    {"data": "name"},
	            {"data": "key"},
	            {"data": "id"},
	            {"data": "resourceName"},
	            {"data": "diagramResourceName"},
	            {"data": "suspended"},
	            {"data": null}
	        ],
	        "columnDefs": [
				{// 所有列默认值
					"targets": "_all",
					"defaultContent": ''
				}
			]
			,"dom": 'rt<"bottom"ip><"clear">' //生成样式
		});
	});
	
	// 查询
	function search4Page(){
		searchTable.ajax.reload();
	}

	// 点击流程发布按钮显示发布
	function processDeployment(){
		$('#processSearch').hide();
		$('#processContainer').show();
		$('#saveBtn').show();
		$('#processForm').attr('action','javascript:deployment();');
	}
	
	// 流程发布的提交过程
	function deployment(){
		// 后台校验key值
		$.post('adjustIsNewProcess',
			$("#processForm").serialize(),
			function(sign){			
				if(!sign.newProcess){
					if(window.confirm('流程已存在,确定要重新发布么？')){
						doDeployment();
					} else {
						alert('发布取消！');
					}
				} else {
					doDeployment();
				}
			}
		);
	}
	
	// 流程大部并返回提示
	function doDeployment() {
		$.post('deployProcess',
			$("#processForm").serialize(),
			function(response){
				if(response.success){
					alert('发布完成！');
				} else {
					alert('发布失败！');
				}
			}
		);
	}
	
</script>
</head>
<body>
	<div class="container-fluid" id="processSearch">
		<div class="row-fluid">
  			<form action="" class="form-inline">
  				  <div class="form-group">
				    <label for="name">流程名称</label>
				    <input type="text" class="form-control" id="name" placeholder="流程XML文件中process的name">
				  </div>
				  <div class="form-group">
				    <label for="key">流程Key</label>
				    <input type="text" class="form-control" id="key" placeholder="流程XML文件中process的id">
				  </div>
				  <div class="form-group">
				    <label for="resourceName">流程文件路径</label>
				    <input type="text" class="form-control" id="resourceName" placeholder="程序文件的绝对路径">
				  </div>
  			</form>
  		</div>
		<div class="row-fluid center-block">
  			<div class="col-md-5 col-md-offset-5">
  				<button type="button" class="btn btn-primary" onclick="search4Page();">查询</button>
  				<button type="button" class="btn btn-primary" onclick="processDeployment();">流程发布</button>
  			</div>
  		</div>
		<div class="row-fluid">
			<!-- 列表 -->
			<table id="searchTable" class="display">
				<thead>
					<tr>
						<th width="10%">流程名称</th>
						<th width="15%">Key</th>
						<th width="15%">流程ID</th>
						<th width="20%">流程文件路径</th>
						<th width="20%">流程图路径</th>
						<th width="15%">是否停用</th>
						<th width="5%">操作</th>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
		</div>
	</div>
	
	<div class="container" id="processContainer" style="display:none">
  		<div class="panel panel-primary">
  			<div class="panel-heading">
  				流程发布
  			</div>
  			<div class="panel-body">
  				<div class="container-fluid">
	  				<div class="col-xs-12">
	  					<form class="form-horizontal" role="form" id="processForm" method="post" action="javascript:deployment();">
	  						<fieldset id="preocessNameField">
	  							<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right" for="key">流程Key值</label>
									<div class="col-sm-8">
										<input type="text" name="key" placeholder="流程Key值" class="col-xs-10 col-sm-5 form-control" required autofocus>
									</div>
								</div>
	  						</fieldset>
	  						<div class="clearfix form-actions">
								<div class="col-md-offset-3 col-md-9">
									<button class="btn btn-info" type="submit" id="saveBtn" style="display:none">
										<i class="ace-icon fa fa-check bigger-110"></i>
										发布
									</button>
								</div>
							</div>
	  					</form>
	  				</div>
	  			</div>
	  		</div>
  		</div>
  	</div>
</body>
</html>